<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./axios.js"></script>
  </head>
  <body>
    <script>
      /* 

        1.为什么不用以前的Vue.prototype.$axios,而需要使用axios.create()
            * 1.1 以前把axios挂载到vue原型中，只能解决什么问题？
                * 解决每一个页面使用axios不需要额外导入
                * 问题没有解决？ ： 网络配置(请求路径，参数)写在页面中，不能复用

        2.axios.create() 作用 ： 创建一个axios实例(axios副本)
            * 2.1 这个方法创建的实例对象 作用  与 axios一模一样，都是来发请求的
            * 2.2 instance 与 axios功能一致，但是这是两个不同的对象。
             * instance 比 axios多了默认配置   
         
        3.如何做网络封装
            3.1  instance().then() 分为两步执行
                第一步： instance()  把网络请求放入promise对象中
                第二步：  then()   获取promise对象异步结果（服务器响应数据）     
        */

      const instance = axios.create({
        //项目基地址
        baseURL: 'https://autumnfish.cn',
        //网络超时10s , 如果网络请求超过时间，则不做任何处理
        timeout: 10000
        //默认请求头
        // headers: { 'X-Custom-Header': 'foobar' }
      })

      //   console.dir( axios );
      //   console.dir( instance );

      instance({
        url: '/album/newest',
        method: 'get'
      }).then(res => {
        console.log(res)
      })

      function getNewest () {
    
        return instance({
          url: `/album/newest?timestamp=${new Date()}`,
          method: 'get'
        })
      }

     getNewest().then(res=>{
         console.log( res );
         
     })
    </script>
  </body>
</html>
